<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜效果</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 350px;
            height: 420px;
            border: 1px solid red;
            margin-left: 20px;
        }
        .img{
            width: 350px;
            height: 350px;
            position: relative;
        }
        .move{
            background-color: rgba(230, 230, 106, 0.5);
            position: absolute;
            left: 0;
            top:0;
            display: none;
            z-index: 99;
            cursor: move;
        }
        .list{
            margin-top: 10px;
        }
        .list>img{
            border: 2px solid transparent;
        }
        .list>img.active{
            border-color: orangered;
        }
        .right{
            width: 500px;
            height: 500px;
            border: 1px solid green;
            position: absolute;
            background: url(./img/large1.jpg) no-repeat;
            display: none;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="img">
            <img id="middle" src="./img/middle1.jpg">
            <div class="move"></div>
        </div>
        <ul class="list flex j-s">
            
        </ul>
    </div>
    <div class="right"></div>
    <script src="../js/bing.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //定义图片数组
        let imgs = [
            {
                large:'./img/large1.jpg',
                middle:'./img/middle1.jpg',
                small:'./img/small1.jpg'
            },
            {
                large:'./img/large2.jpg',
                middle:'./img/middle2.jpg',
                small:'./img/small2.jpg'
            },
            {
                large:'./img/large3.jpg',
                middle:'./img/middle3.jpg',
                small:'./img/small3.jpg'
            },
            {
                large:'./img/large4.jpg',
                middle:'./img/middle4.jpg',
                small:'./img/small4.jpg'
            },
            {
                large:'./img/large5.jpg',
                middle:'./img/middle5.jpg',
                small:'./img/small5.jpg'
            },
        ]
        //设置right的位置
        $('.right').css({
            left:($('.left').offset().left+$('.left').innerWidth()+5)+'px',
            top:$('.left').offset().top+'px'
        })

        //生成小图片
        imgs.map(r=>r.small).forEach((r,i)=>{
            let small = $('<img/>').attr('src',r)
            if(i===0){
                small.addClass('active')
            }
            $('.list').append(small)
        })

        //鼠标进入小图片事件
        $('.list img').mouseenter(function(){
            //切换小图片高亮
            $(this).addClass('active').siblings('.active').removeClass('active')
            //获取当前小图片的索引
            let index = $(this).index()
            //更换中图
            $('#middle').attr('src',imgs[index].middle)
            //更换大图
            $('.right').css({
                backgroundImage:`url(${imgs[index].large})`
            })
        })

        //设置选区框的大小
        $('.move').css({
            width:$('.right').innerWidth()/800*$('#middle').innerWidth(),
            height:$('.right').innerHeight()/800*$('#middle').innerHeight()
        })

        //算出可移动的最大left
        let maxLeft = $('#middle').innerWidth()-$('.move').innerWidth()
        //算出可移动的最大top
        let maxTop = $('#middle').innerHeight()-$('.move').innerHeight()


        //移动方法
        function move(e){
            let {pageX,pageY} = e
            let left = pageX - $('.left').offset().left-$('.move').innerWidth()/2  //算出移动过后的left
            let top = pageY- $('.left').offset().top-$('.move').innerHeight()/2  //算出移动过后的top
            let r = $b.filterLeftAndTop(left,top,maxLeft,maxTop)
            $('.move').css({
                left:r.left+'px',
                top:r.top+'px'
            })
            //计算移动比例
            let lp = r.left/maxLeft*100+'%'
            let tp = r.top/maxTop*100+'%'
            $('.right').css({
                backgroundPosition:`${lp} ${tp}`
            })
        }

        //鼠标进入中图和离开中图
        $('#middle').mouseenter(function(e){
            $('.move').show()
            $('.right').show()
            move(e)
        })
        //拖动框，鼠标移动事件和鼠标离开事件
        $('.move').mousemove(function(e){
            move(e)
        }).mouseleave(function(){
            $('.move').hide()
            $('.right').hide()
        })
    </script>
</body>
</html>